{template '../web_common/header'}

<div class="mainContent clearfix">
    <div class="center-con clearfix">
        <h2 class="main-ttl">添加员工</h2>
        <div class="main-ctn clearfix">
            <div class="item  clearfix">
                <p style="color: #ff0000;margin-bottom: 20px;font-size: 13px">提示: 展示的是微信公众号粉丝列表，需要求员工使用微信关注当前公众号。授权登录的是客服端，授权后即可通过微信扫码使用客服端知识库</p>
                <span>微信昵称：</span>
                <input type="text" name="nickname" class="input-text" placeholder="请输入微信昵称">
                <!--<span class="pl20">微信号/ID：</span>
                <input type="text" class="input-text" name="wxId" placeholder="请输入微信号/ID">-->
                <span class="pl20">关注时间：</span>
                <input type="text" class="input-text Wdate" name="followtime" placeholder="请选择关注时间" onclick="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd',errDealMode: 1})">
                <button type="button" class="Btn ml10" id="search">筛选</button>
                <button type="button" class="Btn ml10" id="clearfixSx">清空筛选</button>
            </div>
            <div class="item  clearfix">
                <button type="button" class="Btn" id="plsq">批量添加</button>

                <button type="button" class="Btn ml10" id="return" onclick="window.location.href='{php echo $this->createWebUrl('employee', array('act' => 'index'));}'">返回/取消</button>
            </div>

            <table data-toggle="table" id="cusTable"></table>

        </div>
    </div>
</div>

<script type="text/javascript">
    require(['jquery', 'bootstrap-table', 'bootstrap-table-zh-CN', 'layer', 'common', 'datepicker'], function ($) {

        initTable();

        //跳转分页
        $('body').on('click', '.gotoPage', function () {
            $('#cusTable').bootstrapTable('selectPage', +$('#gotopage-num').val());
        });

        //当点击查询按钮的时候执行
        $("#search").bind('click', function () {
            var nickname = $('input[name="nickname"]').val();
            var followtime = $('input[name="followtime"]').val();
            if (nickname.length === 0 && followtime.length === 0) {
                layer.msg('请输入微信昵称或者选择关注时间', {time: 1000});
                return false;
            }
            initTable();
        });
        $('input[name="nickname"]').on('keydown', function (e) {
            if (e.keyCode === 13) {
                var nickname = $(this).val();
                if (nickname.length === 0) {
                    layer.msg('请输入微信昵称', {time: 1000});
                    return false;
                }
                initTable();
            }
        })

        //清空筛选
        $('#clearfixSx').on('click',function(){
            $('input[name=nickname]').val('');
            $('input[name=followtime]').val('');
            layer.msg('已清空');
            initTable();
        });

        //批量授权
        $('#plsq').on('click',function(){
            var lists = $("#cusTable").bootstrapTable('getAllSelections');

            if (lists.length == 0) {
                layer.msg('请勾选');
                return false;
            }

            layer.confirm('确定添加这些粉丝吗?', function () {
                var user = {};
                $.each(lists, function (index,item) {
                    user[item.openid] = item.nickname;
                });
                $.get("{php echo $this->createWebUrl('employee', array('act' => 'add'))}", {user:user}, function(data){
                    if(data.code == 1){
                        layer.msg("添加成功",{icon: 1,time:1000});
                        setTimeout(function () {
                            initTable();
                        }, 1000);
                    }else{
                        layer.msg('添加失败！',{icon: 2,time:1000});
                    }
                })
            });
        })


    });

    function initTable() {
        //先销毁表格
        
        $('#cusTable').bootstrapTable('destroy');
        //初始化表格,动态从服务器加载数据
        $("#cusTable").bootstrapTable({
            method: "get",  //使用get请求到服务器获取数据
            url: "{php echo $this->createWebUrl('employee',array('act' => 'fans'))}", //获取数据的Servlet地址
            striped: true,  //表格显示条纹
            height: 580,

            pagination: true, //启动分页
            paginationLoop: false,//禁用无限循环的功能
            pageSize: 5,  //每页显示的记录数
            pageNumber: 1, //当前第几页
            pageList: [5, 10, 25, 50],  //记录数可选列表

            clickToSelect: true,
            search: false,  //是否启用查询
            toolbar:"#toolbar",
            showColumns: false,  //显示下拉框勾选要显示的列
            showRefresh: false,  //显示刷新按钮
            sidePagination: "server", //表示服务端请求
            //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
            //设置为limit可以获取limit, offset, search, sort, order

            queryParamsType : "limit",
            queryParams: function queryParams(params) {   //设置查询参数
                var param = {
                    limit: params.limit,
                    offset: params.offset,

                    nickname:$('input[name=nickname]').val(),
                    followtime:$('input[name=followtime]').val()
                };
                return param;
            },
            columns: [
                {field: "选择",title: "选择",align: 'center',valign: 'middle',width:'5%',checkbox: true,formatter:function (value,row,index) {
                    if (row.is_auth == 1) {
                        return {
                            disabled: true
                        };
                    }
                }},
                {field: "fanid",title: "id",align: 'center',valign: 'middle',width:'5%'},
                {field: "avatar",title: "头像",visible: true,align: 'center',valign: 'middle',width:'10%',formatter:function(value, row, index){
                    var img = "<img src="+ value + " style='width:80px;height:80px'>";
                    return img;
                }},
                {field: "nickname",title: "微信昵称",align: 'center',valign: 'middle'},
                {field: "openid",title: "OpenID",align: 'center',valign: 'middle'},
                {field: "followtime",title: "关注时间",visible: true,align: 'center',valign: 'middle',width:'10%'},

                {field: "fanid",title: '操作',align: 'center',valign: 'middle',width: '15%',formatter:function(value, row, index){
                    var content = row.is_auth == 2 ? '<a class="text-primary" href="javascript:;" data-toggle="tooltip" data-placement="bottom" title="添加员工" data-original-title="添加员工" onclick="add_auth(\'' + row.openid + '\', \'' + row.nickname + '\');">添加员工</a>' : '<p class="text-muted" data-toggle="tooltip" data-placement="bottom" title="已添加" data-original-title="已添加">已添加</p>';
                    return content;
                }}
            ],
            onLoadSuccess: function(){  //加载成功时执行

            },
            onLoadError: function(){  //加载失败时执行
                //
            },
            rowStyle: function(row, index) {
                if (row.is_auth == 1) {
                    return {
                        css: {"background": "#ebedf0"}
                    };
                } else {
                    return {};
                }
            }
        });
    }

    //单个授权
    function add_auth(openid, nickname) {
        if (openid == '' || nickname == '') {
            layer.msg('参数为空');
            return false;
        }
        layer.confirm('确定添加该粉丝吗?', function () {
            var user = {};
            user[openid] = nickname;

            $.get("{php echo $this->createWebUrl('employee', array('act' => 'add'))}", {user: user}, function(data){
                if(data.code == 1){
                    layer.msg("添加成功",{icon: 1,time:1000});
                    setTimeout(function () {
                        initTable();
                    }, 1000);
                }else{
                    layer.msg('添加失败！',{icon: 2,time:1000});
                }
            })
        });
    }

</script>

{template '../web_common/footer'}